<script setup>
import {getCurrentInstance, h, onMounted, ref} from "vue";
import Group from '@/components/Group/index.vue'
import {message} from 'ant-design-vue';
import officeApi from "@/api/office/officeApi";

import engine from "./engine.vue";

const props = defineProps(['hiddenFlag', 'operaCallback', 'productId'])
const productId = ref()
const search = ref();
const {proxy} = getCurrentInstance();
const refresh = () => {
	if(props.hiddenFlag){
		return
	}
	tableRef.value.refresh();
}

const engineInstance = ref();

const tableRef = ref();

const columns = ref([
	{
		title: '名称',
		key: 'workName',
		dataIndex: 'workName',
		ellipsis: true,
	},
	{
		title: '编码',
		key: 'workCode',
		dataIndex: 'workCode',
		ellipsis: true,
	},
	{
		title: '操作',
		key: 'action',
		dataIndex: 'action',
		ellipsis: true,
		width: 70,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					edit(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{
				type: 'primary',
				click: (field, record) => {
					docView(record)
				},
				render: (record) => {
					return "文档";
				}
			},
			{
				click: (field, record) => {
					remove(record)
				},
				render: (record) => {
					return '删除';
				}
			}
		]
	}
])


const save = async () => {
	if (!officeConfig.value.groupId) {
		officeConfig.value.groupId = currentGroupId.value == 0 ? null : currentGroupId.value

	}
	officeConfig.value.productId = productId.value;
	if (!officeConfig.value.groupId) {
		message.error("请选择分组")
		return
	}
	officeConfig.value.typeCode = 'excel';
	const s = await officeApi.save(officeConfig.value);

	if (props.operaCallback) {
		props.operaCallback(officeConfig.value.id?'edit':'add', 'excel', {
			id: s,
			...officeConfig.value
		})
	}

	officeConfig.value = {}
	officeConfig.value.visible = false;
	refresh();
}
const officeConfig = ref({
	visible: false
});
const queryList = async () => {
	if(props.hiddenFlag){
		return
	}
	return await officeApi.queryList({
		groupId: currentGroupId.value == 0 ? null : currentGroupId.value,
		productId: productId.value,
		typeCode: "excel"
	});

}

const edit = async (row) => {
	const a = await officeApi.getById({id: row.id});
	officeConfig.value = a;
	officeConfig.value.visible = true;
}

const remove = async (row) => {
	const a = await officeApi.removeById(row.id);
	refresh();
	if (props.operaCallback) {
		props.operaCallback('delete', 'excel', {
			id: row.id,
			...row.value
		})
	}
}
const docView = (row) => {
	officeConfig.value.id = row.id;
	officeConfig.value.docFlag = true;

}

const saveContent = () => {
	let data = engineInstance.value.getValue();

	officeApi.saveContent({
		officeId: officeConfig.value.id,
		content: JSON.stringify(data),
		fileTypeCode: "xlsx"
	});

	officeConfig.value.docFlag = false;
}

const currentGroupId = ref(0);

const selectTree = (id, code, name) => {
	currentGroupId.value = id;
	refresh();
}

onMounted(() => {
	productId.value = props.productId;
	if (!productId.value) {
		productId.value = proxy.$route.query.productId;
	}
})


const show = (action, data) => {
	// currentAction.value = action;
	if (action == 'add') {
		// addApiFlag.value = true
		officeConfig.value.id = null;
		officeConfig.value.visible = true;
		currentGroupId.value = data.id
	} else if (action == 'delete') {
		remove(data);
	} else if (action == 'edit') {
		currentGroupId.value = data.groupId;
		edit(data);
	}
}

defineExpose({
	show
})
</script>

<template>
	<a-row :gutter="10" class="mb-2" v-if="!props?.hiddenFlag">
		<a-col :span="5">
			<Group :selectTree="selectTree" relationTypeCode="OFFICE" :productId="productId"></Group>
		</a-col>
		<a-col :span="19">
			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<a-space>
							<a-input-search placeholder="请输入内容" v-model:value="search"
											@search="refresh"></a-input-search>
							<a-button @click="officeConfig.id = null; officeConfig.visible = true;"
									  type="primary">新增
							</a-button>
						</a-space>
					</a-card>
				</a-col>
			</a-row>

			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<h-table :columns="columns" ref="tableRef" :data="queryList">

						</h-table>
					</a-card>
				</a-col>
			</a-row>
		</a-col>
	</a-row>

	<a-modal v-model:open="officeConfig.visible" :closable="false" width="300px">
		<a-form :model="officeConfig">
			<a-form-item label="名称">
				<a-input v-model:value="officeConfig.workName"></a-input>
			</a-form-item>

			<a-form-item label="编码">
				<a-input v-model:value="officeConfig.workCode"></a-input>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-space>
				<a-button @click="officeConfig.visible = false">取 消</a-button>
				<a-button type="primary" @click="save">确 定</a-button>
			</a-space>
		</template>
	</a-modal>

	<a-modal :destroyOnClose="true" v-model:open="officeConfig.docFlag" :closable="false" width="100%" height="100%"
			 wrap-class-name="full-modal" @ok="saveContent">
		<engine :officeId="officeConfig.id" ref="engineInstance"></engine>
	</a-modal>

</template>

<style scoped>
.full-modal {
	.ant-modal {
		max-width: 100%;
		top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	.ant-modal-content {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}

	.ant-modal-body {
		flex: 1;
	}
}
</style>
